<template>
  <div class="login">
    <div class="box">
      <div class="header">
        <img src="../../../../assets/img/main/loginicon.png" alt="" />
      </div>
      <div class="banner">
        <div class="phone">
          <div class="phone-name">手机号</div>
          <input
            type="num"
            placeholder="请输入你的手机号"
            class="phone-input-a"
            v-model="phoneNum"
          />
        </div>
        <!-- <div class="line"></div> -->
        <div class="code">
          <div class="code-name">验证码</div>
          <input
            type="text"
            class="code-input-a"
            placeholder="验证码"
            v-model="imgcode"
          />
          <div class="code-img" type="info">
            <!-- <img src="http://192.168.2.122/pub/verify" alt=""> -->
            <!-- <img src="../../../../assets/img/yzm.jpg" alt="" /> -->
            <img
              class="tupiantitle"
              :src="codeImgUrl"
              title="刷新"
              alt="刷新"
              @click="imgCode"
            />
          </div>
        </div>
        <!-- <div class="line"></div> -->
        <div class="phone-code">
          <div class="phone-code-name">验证码</div>
          <input
            type="text"
            class="code-input-a"
            placeholder="验证码"
            v-model="VcationCode"
          />
          <!-- <div class="make-code" v-if="this.count <= 0" @click="makeCode()">
            {{ makecode }}
          </div>
          <div v-else class="make-code-Select">{{ count }}</div> -->
          <div class="make-code">
            <span v-show="show1" @click="makeCode()">获取验证码</span>
            <span v-show="!show1" class="count">{{ count }} s</span>
          </div>
        </div>
        <!-- <div class="line"></div> -->
        <div class="phone-input"></div>
      </div>

      <div class="footer">
        <div class="next" @click="doLogin()">登录</div>
      </div>
      <div class="xieyi">
        <van-radio-group @change="changebox" v-model="radio">
          <van-radio
            @click="changeboxx"
            icon-size="15px"
            checked-color="#07c6b4"
            :name="1"
            >我同意<span @click="goxieyi()" style="color:#07c6b4"
              >《用户协议与隐私政策》</span
            ></van-radio
          >
        </van-radio-group>
      </div>
      <div class="jishuzhichi">技术支持：郑州丰泰思科通信技术有限公司</div>

      <van-popup
        v-model="show"
        closeable
        position="bottom"
        :style="{ height: '50%' }"
      >
        <div class="diaLog">
          <div class="headerName">请输入姓名</div>
          <p>检测到该手机号作为用户名存在,请输入当时绑定的姓名</p>
          <div class="logInut">
            <div class="name">姓名:</div>
            <div class="input">
              <input type="text" class="input-name" v-model="name" />
            </div>
          </div>
          <div class="btn" @click="shoreMessage()">确认</div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import { getOpenidApi } from "@/service/api.js";
import { loginPhoneApi, newloginApi } from "@/service/api.js";

import { Toast, RadioGroup, Radio } from "vant";
import { Popup } from "vant";
import axios from "axios";
// 项目的appId
// var appid = "wx4340073402255596"; //李源id
var appid = "wxb2cdae0ba1d92ffe";
// // 授权后 需要跳回的页面 一般是当前页面
var okurl = encodeURI("http://loulijuan6.natapp1.cc/");
var userInfo_url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${okurl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
// 接口服务器地址:
export default {
  name: "index",
  data() {
    return {
      show1: true,
      count: "",
      timer: null,
      unid: "",
      changed: false,
      name: "", //弹框绑定的姓名
      show: false,
      phoneNum: "", //电话号码
      imgcode: "", //图片验证码
      VcationCode: "", //验证码
      msg: "", //提示信息
      makecode: "获取验证码",
      count: 0,
      code: "", //code码
      openid: "", //oppen id
      codeImgUrl: "", //验证码图片
      token: "",
      jiankang: "",
      dingdan: "",
      radio: "",
      boxstate: false
    };
  },
  components: {},
  created() {
    this.imgCode();
  },

  methods: {
    goxieyi() {
      this.$router.push({
        name: "xieyi"
      });
    },
    changebox(e) {
      this.boxstate = true;
    },
    changeboxx(e) {
      if (!this.boxstate) {
        this.radio = "";
      }
      this.boxstate = false;
    },
    // 刷新验证码
    imgCode() {
      var num = Math.ceil(Math.random() * 100); //生成一个随机数（防止缓存）
      var codeImg = "?url=" + num;
      this.codeImgUrl = process.env.VUE_APP_URL + "/pub/verify" + codeImg;
    },

    doLogin() {
      let regPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      let msg = "";

      if (this.phoneNum == "") {
        console.log("空");
        msg = "请输入手机号";
        Toast.fail("请输入手机号");
      }
      if (!regPhone.test(this.phoneNum)) {
        msg = "请输入正确的手机号";
        Toast.fail("请输入正确的手机号");
      }
      if (this.imgcode == "") {
        console.log("空");
        msg = "请输入图片验证码";
        Toast.fail("请输入图片验证码");
      }
      if (this.VcationCode == "") {
        console.log("空");
        msg = "请输入验证码";
        Toast.fail("请输入验证码");
      }
      if (msg == "") {
        if (this.radio == 1) {
          let apptoken = JSON.parse(localStorage.getItem("apptoken"));
          console.log(this.apptoken);
          newloginApi({
            phone: this.phoneNum,
            code: this.VcationCode,
            apptoken: apptoken
          }).then(res => {
            console.log(res);
            if (res.code == 4000) {
              let token = res.data.token;
              localStorage.setItem("token", token);
              this.$router.go(-1);
            } else {
              Toast.fail(res.msg);
            }
          });
        } else {
          Toast("请您先勾选是否同意协议政策");
        }

        //   getUserByPhoneApi({
        //     mobile: this.phoneNum
        //   }).then(res => {
        //     console.log(res);
        //     if (res.code == 4000) {
        //       // 成功,没有档案
        //       // 验证手机号,验证码
        //       valiPhoneApi({
        //         mobile: this.phoneNum,
        //         code: this.VcationCode
        //         // imgCode: this.imgcode,
        //       }).then(res => {
        //         console.log(res);
        //         if (res.code == 4000) {
        //           this.$router.push({
        //             name: "inFrom",
        //             query: {
        //               mobile: this.phoneNum,
        //               openid: this.openid,
        //               unid: this.unid
        //             }
        //           });
        //         } else if (res.code == 4001) {
        //           Toast.fail("验证码错误,请重试");
        //           this.imgCode();
        //         } else {
        //           Toast(res.msg);
        //         }
        //       });
        //     } else if (res.code == 4001) {
        //       // 失败,手机号错误
        //       Toast.fail("手机号错误,请重试");
        //       // this.msg = res.msg;
        //     } else if (res.code == 4002) {
        //       // 成功,没有档案
        //       // 验证手机号,验证码
        //       valiPhoneApi({
        //         mobile: this.phoneNum,
        //         code: this.VcationCode
        //         // imgCode: this.imgcode,
        //       }).then(res => {
        //         console.log(res);
        //         if (res.code == 4000) {
        //           this.$router.push({
        //             name: "check",
        //             query: {
        //               phone: this.phoneNum,
        //               msg: this.msg,
        //               openid: this.openid
        //             }
        //           });
        //         } else if (res.code == 4001) {
        //           Toast.fail("验证码错误,请重试");
        //           this.imgCode();
        //         } else {
        //           Toast(res.msg);
        //         }
        //       });
        //     } else {
        //       Toast(res.msg);
        //     }
        //   });
      }
    },

    // 获取验证码
    makeCode() {
      // 判断手机号是否正确
      let regPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      // 图片验证码正则
      var codeReg = /^[0-9A-Za-z]{4}$/;
      var msg = "";
      console.log(this.VcationCode);
      if (this.phoneNum == "") {
        msg = "请输入正确的手机号";
        Toast.fail("请先输入手机号");
      } else if (!regPhone.test(this.phoneNum)) {
        msg = "请输入正确的手机号";
        Toast.fail("手机号错误,请重试");
      }
      if (this.imgcode == "") {
        console.log(2);
        msg = "请输入图片验证码";
        Toast.fail("请输入图片验证码");
      } else if (!codeReg.test(this.imgcode)) {
        msg = "请输入四位图片验证码";
        Toast.fail("验证码错误,请重试");
      }

      if (msg == "") {
        let apptoken = JSON.parse(localStorage.getItem("apptoken"));

        // 执行接口发短信
        loginPhoneApi({
          phone: this.phoneNum,
          imgCode: this.imgcode,
          apptoken: apptoken
        }).then(res => {
          console.log(res);
          if (res.code == 4000) {
            //成功
            Toast.success("发送成功");
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.show1 = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show1 = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
          } else {
            //失败

            Toast.fail(res.msg);
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.tupiantitle {
  font-size: 14px;
}
.diaLog {
  // width: 100%;
  margin-left: 10px;
  margin-right: 10px;
  .headerName {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
  }
  p {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .logInut {
    display: flex;
    margin-bottom: 100px;
    .name {
      margin-right: 10px;
    }
    .input {
      .input-name {
        border: none;
        border-bottom: 1px solid black;
      }
    }
  }
  .btn {
    width: 350px;
    height: 45px;
    background: #07c6b4;
    margin: 0 auto;
    text-align: center;
    line-height: 45px;
    color: #ffffff;
    border-radius: 5px;
  }
}
.login {
  width: 100%;
  background: #ffffff;
  .box {
    .header {
      width: 6rem;
      height: 6rem;
      margin: 0 auto;
      margin-top: 1.2rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .banner {
      margin-bottom: 0.4rem;

      .phone {
        width: 80%;
        margin: 0 auto;
        padding-left: 0.2rem;
        display: flex;
        height: 1.3rem;
        border: 0.02rem solid #ccc;
        border-radius: 0.2rem;
        .phone-name {
          font-size: 0.45rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666;
          line-height: 1.3rem;
          width: 2rem;
        }

        .phone-input-a {
          border: none;
          font-size: 0.4rem;
          width: 4rem;
          font-family: PingFang SC;
        }
      }
      .code {
        width: 80%;
        margin: 0 auto;
        padding-left: 0.2rem;
        display: flex;
        height: 1.3rem;
        border: 0.02rem solid #ccc;
        border-radius: 0.2rem;
        margin-top: 0.2rem;
        .code-name {
          font-size: 0.45rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666;
          line-height: 1.3rem;
          width: 2rem;
        }

        .code-input-a {
          border: none;
          font-size: 16px;
          width: 2.8rem;
          font-family: PingFang SC;
        }

        .code-img {
          width: 2.5rem;
          height: 1rem;
          margin-top: 5px;
          border: 1px solid #07c6b4;
          text-align: center;
          margin-left: 0.2rem;

          img {
            width: 2.5rem;
            height: 1rem;
          }
        }
      }
      .phone-code {
        width: 80%;
        margin: 0 auto;
        padding-left: 0.2rem;
        display: flex;
        height: 1.3rem;
        border: 0.02rem solid #ccc;
        border-radius: 0.2rem;
        margin-top: 0.2rem;
        .phone-code-name {
          font-size: 0.45rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666;
          line-height: 1.3rem;
          width: 2rem;
        }

        .code-input-a {
          border: none;
          font-size: 16px;
          width: 2.8rem;
          font-family: PingFang SC;
        }
        .make-code {
          width: 2.5rem;
          height: 1rem;
          margin-top: 0.1rem;
          border: 1px solid #07c6b4;
          text-align: center;
          margin-left: 0.2rem;
          font-size: 0.4rem;
          line-height: 1rem;
          border-radius: 0.1rem;
          color: #07c6b4;
        }
        .make-code-Select {
          margin-top: 6px;
          text-align: center;
          line-height: 30px;
          font-size: 15px;
          width: 100px;
          //   background: blue;
          height: 30px;
          border-radius: 5px;
          background: #cccc;
          color: #ffffff;
          border: 1px solid #cccccc;
        }
      }
    }
    .xieyi {
      width: 55%;
      margin: 0 auto;
      font-size: 0.3rem;
    }

    .footer {
      margin-bottom: 0.4rem;
      .next {
        width: 80%;
        height: 1.3rem;
        background: #07c6b4;
        font-size: 0.45rem;
        margin: 0 auto;
        text-align: center;
        line-height: 1.3rem;
        color: #ffffff;
        border-radius: 0.1rem;
      }
    }

    .jishuzhichi {
      // position: fixed;
      width: 100%;
      // bottom: 10px;
      text-align: center;
      margin-top: 0.8rem;
      font-size: 0.35rem;
      color: #999;
    }
  }
}
</style>
